/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="toggle-panel-field">
        <div class="toggle-panel-field_head">
            <span class="toggle-panel_hander-btn hand"
                  @click="expanded = !expanded"
                  :class="{expanded: !!expanded}"></span>
            <span class="toggle-panel-field_title" v-html="title"></span>
        </div>
        <div class="toggle-panel-field_body" v-show="!!expanded">
            <slot></slot>
        </div>
    </div>
</template>

<style lang="stylus">
    .toggle-panel-field
        margin 12px auto
        background white

        .toggle-panel-field_head
            padding 14px 24px
            border-bottom 1px solid #ddd

        .toggle-panel-field_title
            font-size 15px
            font-weight bold


        .toggle-panel_hander-btn
            float left
            display block
            width 22px
            height 22px
            margin-right 12px
            background url("./img/drop_down.png")

            &.expanded
                transform rotate(180deg)

            &:hover
                background url("./img/drop_down_hover.png")



</style>

<script>

    /**
     * Created by clf on 2018/6/14.
     * copy from src/mod_manager/alert_setting/common/alter_setting_field.vue
     */

    export default {
        name: 'TogglePanel',

        props: {
            title: {
                type: String,
                'default': ''
            },

            autoExpand: {
                type: Boolean,
                'default': false
            }
        },

        data () {
            return {
                expanded: this.autoExpand
            };
        }
    };

</script>
